<template>
  <el-form-item label="所属区域:" prop="belongRegion">
    <el-row :gutter="20" class="region-container">
      <!-- 省份选择 -->
      <el-col :span="4">
        <el-select v-model="selectedProvince" placeholder="请选择省" @change="handleProvinceChange">
          <el-option v-for="province in provinces" :key="province.id" :label="province.name" :value="province.id" />
        </el-select>
      </el-col>
      <!-- 市选择 -->
      <el-col :span="4">
        <el-select v-model="selectedCity" placeholder="请选择市" @change="handleCityChange" :disabled="!selectedProvince">
          <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id" />
        </el-select>
      </el-col>
      <!-- 区选择 -->
      <el-col :span="4">
        <el-select v-model="selectedDistrict" placeholder="请选择区" @change="handleDistrictChange" :disabled="!selectedCity">
          <el-option v-for="district in districts" :key="district.id" :label="district.name" :value="district.id" />
        </el-select>
      </el-col>
      <!-- 小区选择 -->
      <el-col :span="4">
        <el-select v-model="selectedCommunity" placeholder="请选择小区" @change="handleCommunityChange" :disabled="!selectedDistrict">
          <el-option v-for="community in communities" :key="community.id" :label="community.name" :value="community.id" />
        </el-select>
      </el-col>
      <!-- 单元选择 -->
      <el-col :span="4">
        <el-select v-model="selectedUnit" placeholder="请选择单元" :disabled="!selectedCommunity">
          <el-option v-for="unit in units" :key="unit.id" :label="unit.name" :value="unit.id" />
        </el-select>
      </el-col>
    </el-row>
  </el-form-item>
</template>

<script>
export default {
  props: {
    provinces: Array,
    cities: Array,
    districts: Array,
    communities: Array,
    units: Array,
    selectedProvince: [String, Number],
    selectedCity: [String, Number],
    selectedDistrict: [String, Number],
    selectedCommunity: [String, Number],
    selectedUnit: [String, Number]
  },
  methods: {
    handleProvinceChange(value) {
      this.$emit('province-change', value);  // 触发父组件事件，传递选择的省份
    },
    handleCityChange(value) {
      this.$emit('city-change', value);  // 传递选择的城市
    },
    handleDistrictChange(value) {
      this.$emit('district-change', value);  // 传递选择的区
    },
    handleCommunityChange(value) {
      this.$emit('community-change', value);  // 传递选择的小区
    }
  }
}
</script>
<style lang="scss" scoped>
.region-container {
  ::v-deep .el-input--small .el-input__inner {
    width: 120px;
  }

  &>.el-col:not(:first-child) {
    margin-left: 10px;
  }
}
</style>